<template>
<div>
    <div class="name">{{ title }}</div>
    <div class="money">￥{{ cost }}</div>
    <div class="compare">
        <div class="box">
            <span class="one">日同比</span>
            <span class="per">{{ yoy }}%</span>
            <span class="up"></span>
        </div>
        <div class="box">
            <span class="one">日环比</span>
            <span class="per">{{ qoq }}%</span>
            <span class="down"></span>
        </div>
    </div>
</div>

</template>

<script>
  export default {
    props: {
      title: String,
      type: String,
      cost: {
        type: Number
      },
      yoy: { // 同比
        type: Number
      },
      qoq: { // 环比
        type: Number
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
.name{
    // width: 64px;
    // height: 20px;
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: 600;
    text-align: LEFT;
    color: #333333;
    line-height: 40px;
    margin-left: 15px;
}
.money{
    /*width: 108px; */
    /* height: 40px; */
    font-size: 45px;
    margin-top: 10px;
    font-family: Oxanium,Oxanium-Bold;
    font-weight: 900;
    text-align: CENTER;
    color: #33317e;
    line-height: 55px;
}
.compare{
    // height: 90px;
    margin: 20px 10px;
    padding:10px;
    margin-top: 35px;
    background: linear-gradient(90deg,#f5f6f8, #ffffff 100%);
    border-radius: 8px;
    .box{
        margin: 0px auto;
        &+.box {
          margin-top: 20px;
        }
        .one{
            width: 42px;
            height: 20px;
            font-size: 14px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: LEFT;
            color: #666666;
            line-height: 20px;
        }
        .per{
            width: 49px;
            height: 20px;
            font-size: 14px;
            font-family: Oxanium, Oxanium-Regular;
            font-weight: 400;
            text-align: RIGHT;
            color: #333333;
            line-height: 20px;
            margin-left: 185px;
        }
        .up{
            // margin-left: 110px;
            margin-top: 1px;
            margin-left: 5px;
            float: right;
            border: 6px solid transparent;
            border-right-color: #f60000;
            // border-width: 100px;
            border-style: solid;
            border-color: transparent #f60000 transparent transparent;
            transform: rotate(90deg); /*顺时针旋转90°*/
            width: 10px;
            height: 10px;
            // background: #f60000;
        }
        .down{
            /* margin-left: 10px; */
            margin-top: 8px;
            margin-left: 5px;
            float: right;
            border: 6px solid transparent;
            border-top-color: #34a900;
            width: 10px;
            height: 10px;
        }
    }
}
</style>
